<template>
  <div class="meeting-container">
    <el-card class="meeting-card">
      <template #header>
        <div class="card-header">
          <span>会议纪要管理</span>
          <el-button
type="primary" @click="handleAdd">
新增会议纪要
</el-button>
        </div>
      </template>

      <!-- 搜索条件 -->
      <el-form :model="searchForm"
label-width="80px" class="search-form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input v-model="searchForm.keywords"
placeholder="请输入标题关键词" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主持人">
              <el-select v-model="searchForm.anchor_id"
placeholder="请选择主持人" clearable>
                <el-option label="全部"
value="" />
                <!-- 这里应该从后端获取主持人列表 -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会议日期">
              <el-date-picker
                v-model="searchForm.date_range"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button
type="primary" @click="handleSearch">
搜索
</el-button>
              <el-button @click="handleReset">
重置
</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 会议列表 -->
      <el-table :data="meetingList"
border v-loading="loading" stripe>
        <el-table-column prop="id"
label="ID" width="80" />
        <el-table-column prop="title"
label="会议标题" show-overflow-tooltip />
        <el-table-column prop="anchor_name"
label="主持人" width="120" />
        <el-table-column prop="recorder_name"
label="记录人" width="120" />
        <el-table-column prop="meeting_date"
label="会议日期" width="120" />
        <el-table-column prop="create_time"
label="创建时间" width="160" />
        <el-table-column label="操作"
width="150" fixed="right">
          <template #default="scope">
            <el-button
type="primary" size="small" @click="handleView(scope.row)">
查看
</el-button>
            <el-dropdown @command="handleCommand">
              <el-button size="small">
                更多
                <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="{ action: 'delete', row: scope.row }">
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 查看会议详情对话框 -->
    <el-dialog v-model="viewDialogVisible"
title="会议详情" width="60%" destroy-on-close>
      <div v-if="currentMeeting">
        <el-descriptions :column="2"
border>
          <el-descriptions-item label="会议标题">
            {{ currentMeeting.title }}
          </el-descriptions-item>
          <el-descriptions-item label="会议日期">
            {{ currentMeeting.meeting_date }}
          </el-descriptions-item>
          <el-descriptions-item label="主持人">
            {{ currentMeeting.anchor_name }}
          </el-descriptions-item>
          <el-descriptions-item label="记录人">
            {{ currentMeeting.recorder_name }}
          </el-descriptions-item>
          <el-descriptions-item label="参与人员">
            {{ currentMeeting.join_names }}
          </el-descriptions-item>
          <el-descriptions-item label="签到人员">
            {{ currentMeeting.sign_names }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ currentMeeting.create_time }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ currentMeeting.update_time }}
          </el-descriptions-item>
        </el-descriptions>

        <el-card class="content-card">
          <template #header>
            <span>会议内容</span>
          </template>
          <div v-html="currentMeeting.content" />
        </el-card>

        <el-card
          v-if="currentMeeting.file_array && currentMeeting.file_array.length > 0"
          class="file-card"
        >
          <template #header>
            <span>附件</span>
          </template>
          <div class="file-list">
            <el-link
              v-for="file in currentMeeting.file_array"
              :key="file.id"
              :href="file.url"
              target="_blank"
              :underline="false"
            >
              <el-icon><Document /></el-icon>
              {{ file.name }}
            </el-link>
          </div>
        </el-card>
      </div>

      <template #footer>
        <el-button @click="viewDialogVisible = false">
关闭
</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'

  import axios from '@/utils/request'

  // 搜索表单
  const searchForm = ref({
    keywords: '',
    anchor_id: '',
    date_range: '',
  })

  // 会议列表数据
  const meetingList = ref([])
  const loading = ref(false)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  // 查看对话框
  const viewDialogVisible = ref(false)
  const currentMeeting = ref(null)

  // 获取会议列表
  const getMeetingList = async () => {
    loading.value = true
    try {
      const params = {
        page: currentPage.value,
        limit: pageSize.value,
        keywords: searchForm.value.keywords,
        anchor_id: searchForm.value.anchor_id,
      }

      if (searchForm.value.date_range && searchForm.value.date_range.length === 2) {
        params.date_range = `${searchForm.value.date_range[0]}~${searchForm.value.date_range[1]}`
      }

      const res = await axios.get('/oa/meeting/list', { params })
      if (res.data.code === 0) {
        meetingList.value = res.data.data
        total.value = res.data.count
      } else {
        ElMessage.error(res.data.msg || '获取会议列表失败')
      }
    } catch (error) {
      ElMessage.error('获取会议列表失败: ' + error.message)
    } finally {
      loading.value = false
    }
  }

  // 搜索
  const handleSearch = () => {
    currentPage.value = 1
    getMeetingList()
  }

  // 重置搜索条件
  const handleReset = () => {
    searchForm.value = {
      keywords: '',
      anchor_id: '',
      date_range: '',
    }
    currentPage.value = 1
    getMeetingList()
  }

  // 分页相关
  const handleSizeChange = val => {
    pageSize.value = val
    currentPage.value = 1
    getMeetingList()
  }

  const handleCurrentChange = val => {
    currentPage.value = val
    getMeetingList()
  }

  // 查看会议详情
  const handleView = async row => {
    try {
      const res = await axios.get('/oa/meeting/view', {
        params: { id: row.id },
      })
      if (res.data.code === 0) {
        currentMeeting.value = res.data.data
        viewDialogVisible.value = true
      } else {
        ElMessage.error(res.data.msg || '获取会议详情失败')
      }
    } catch (error) {
      ElMessage.error('获取会议详情失败: ' + error.message)
    }
  }

  // 新增会议纪要
  const handleAdd = () => {
    ElMessage.info('新增会议纪要功能待实现')
  }

  // 处理下拉菜单命令
  const handleCommand = command => {
    const { action, row } = command
    switch (action) {
      case 'delete':
        handleDelete(row)
        break
    }
  }

  // 删除会议纪要
  const handleDelete = () => {
    ElMessageBox.confirm('确定要删除该会议纪要吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        ElMessage.info('删除会议纪要功能待实现')
      })
      .catch(() => {
        // 取消删除
      })
  }

  // 组件挂载时获取数据
  onMounted(() => {
    getMeetingList()
  })
</script>

<style scoped>
  .meeting-container {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search-form {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    text-align: right;
  }

  .content-card,
  .file-card {
    margin-top: 20px;
  }

  .file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .file-list .el-link {
    display: flex;
    align-items: center;
    gap: 5px;
  }
</style>
